<!DOCTYPE html>
<html>
	<head>
		<meta name="layout" content="main"/>
		<title>Welcome to Grails</title>		
<script>
	$(document).ready(function(){		
		$('.even, .odd').hover(function(){
			var buttonSave = $(this).find("input[name='retroSave']");
				if(buttonSave.css("display")!="none")
				{
				 //alert("khong");
				
				 }
				else
				{
				 $(this).find("button[name='retroEdit']").show(300);
				  console.log("1");
				}
			},function(){
				console.log("2");
				$(this).find("button[name='retroEdit']").hide(300);
			});
		
		
	
		$(".add").on('click',function(){
			$(".form").show(500);	
			$(this).hide(500);
		});
		$(".cancel").on('click',function(){
			$(".form").hide(1000);	
			$(".add").show(500);
		});
		
		$("button[name='retroEdit']").on('click',function(){
			var div= $(this).parent();
			var text=div.children('div:first').html().trim();
			div.children('div:first').html("<input type='text' name='description' value='"+text+"'>");			
			//$(this).attr("disabled","disabled");	
			$(this).hide();
			$(this).parent().children("input[name='retroSave']").show();
			$(this).parent().children("input[name='retroCancel']").show();
			$("input[name='description']").pressEnter(function(){
				 var description= $(this).val().trim();
				 var id = $(this).parent().parent().attr("id");			
					if (!description || !(description.length>5)) {
						alert("Description must be more than 5 characters");
						return false;
					}
					else{
					$.ajax({
							url:'${g.createLink(controller:'retrospectiveResult', action:'updateRetro')}',
							dataType: 'json',
							data:{id : id, de : description},
							success: function(data){
									//alert($(data.retro.id).html());
									var a = "#d"+data.retro.id;
									$(a).html(data.retro.description);	
									$("#s"+data.retro.id).hide();
									$("#c"+data.retro.id).hide();					
								}
						});
					$(".form").hide(500);
					$(".form").children("form:first").find("textarea").val("");
					$(".add").show(500);
					}

			 });
			
			});
		$("input[name='retroSave']").on('click',function(){
			
			//alert($(this).parent().html());
			var rId = ($(this).parent()).attr("id");
			var des = $(this).parent().children('div:first').children().first();
			var desc = des.val().trim();
			//alert(desc.length);
			if(!desc||!(desc.length>5)){
				alert("Description must be more than 5 characters");
				return false;
				}
			else{
			$.ajax({
				url:'${g.createLink(controller:'retrospectiveResult', action:'updateRetro')}',
				dataType: 'json',
				data:{id: rId, de: desc},
				success: function(data){
					var a = "#d"+data.retro.id;
					$(a).html(data.retro.description);	
					$("#s"+data.retro.id).hide();							
					}
				});
			//$(this).parent().find("button[name='retroEdit']").attr("disabled",false);
			$(this).parent().find("input[name='retroCancel']").hide();
			}					
			});	

		

		$("a[name='image']").on('click',function(){
			var src = $(this).parent().children("a").children("img").attr("src");
			if(src == '/my-agile/static/images/unhappy.png'){
				if(confirm('Are you sure to change UNSOLVED to SOLVED?')){
					var id = $(this).parent().attr("id");					
				$.ajax({
					url:'${g.createLink(controller:'retrospectiveResult', action:'updateType')}',
					dataType: 'json',
					data: {id : id},
					success: function(data){
					
						$("#"+data.retro.id).children("a:first").html("<img class='img' src='../images/happy.png'/>");
						//$("#"+data.retro.id).children("a:first").click(function());
						//alert($("#"+data.retro.id).children("a:first").attr("name"));
						}
					});
			}
			}
			});	

		$("#add").on('click',function(){				
			var description = $(".form").children("form:first").find("textarea").val().trim();
			
			if (!description || !(description.length>5)) {
				alert("Description must be more than 5 characters");
				return false;
			}
			else
				{
			$.ajax({
					url:'${g.createLink(controller:'retrospectiveResult', action:'addRetro')}',
					dataType: 'json',
					data:{description : description},
					success: function(data){
							$(".show").append(
								"<div id="+data.retro.id+" class='even'><a name='image'><img class='img' src='../images/unhappy.png'/></a>"+data.retro.description+"</div>"									
							);
						window.location.href="newRetro";
													
						}
				});
			$(".form").hide(500);
			$(".form").children("form:first").find("textarea").val("");
			$(".add").show(500);
				}
			
			});

		
		$.fn.pressEnter = function(fn) {  

		    return this.each(function() {  
		        $(this).bind('enterPress', fn);
		        $(this).keyup(function(e){
		            if(e.keyCode == 13)
		            {
		              $(this).trigger("enterPress");
		            }
		        })
		    });  
		 }; 

		
				
		 $('.description').pressEnter(function(){
			 var description = $(".form").children("form:first").find("textarea").val().trim();
				if (!description || !(description.length>5)) {
					alert("Description must be more than 5 characters");
					return false;
				}
				else{
				$.ajax({
						url:'${g.createLink(controller:'retrospectiveResult', action:'addRetro')}',
						dataType: 'json',
						data:{description : description},
						success: function(data){
								$(".show").append(
									"<div id="+data.retro.id+" class='even'><a name='image'><img class='img' src='../images/unhappy.png'/></a>"+data.retro.description+"</div>"									
								);
							window.location.href="newRetro";
														
							}
					});
				$(".form").hide(500);
				$(".form").children("form:first").find("textarea").val("");
				$(".add").show(500);
				}
			 });

			$("input[name='retroCancel']").click(function(){
				var id = $(this).parent().attr("id");
				$.ajax({
						url:'${g.createLink( controller:'retrospectiveResult', action:'getRetro')}',
						dataType: 'json',
						data: {id : id},
						success: function(data){
							//alert(data.retro)
							//console.log(data);
							var a = "#d"+data.retro.id;
							$(a).html(data.retro.description);	
							$("#s"+data.retro.id).hide();
							
							}
					});
				$(this).hide();
				});
		
		 	
	});
</script>	
<style type="text/css">
	.form{
	background-color: yellow;
	width: 300px;
	height: 110px;
	padding: 5px;
	margin: 5px;
	position: relative;
	}
	.odd{
	background-color: #FDD7E4;
	width: 300px;
	height: 100px;
	padding: 5px;
	margin: 5px;
	position: relative;
	}
	.even{
	background-color: #FFFFC2;
	width: 300px;
	height: 100px;
	padding: 5px;
	margin: 5px;
	position: relative;
	}
	.img{
	position: absolute;
	right: 3px;
	bottom: 3px;
	width: 30px;
	height: 30px;
	}
	.content{
	width: 300px;
	height: 80px;
	overflow-y: scroll;
	}
</style>
	
	</head>
	<body>
	
	<div style="position: relative; width: 300px; height: 50px;">
	<button class="add" style="position: absolute; left: 3px;"><img style="width: 20px; height: 20px;" src="${resource(dir: 'images', file: 'add.png')}"/></button>
	</div>
	<div class="form" style="display: none;">
		<form>
			Description: 
			<br/>
			<g:textArea class="description" name="description" maxlength="200" required="required" style="height:  50px !important; width: 250px !important"/>
			
			<br/>
			<input type="button" value="Add" name="add" id="add"/>
			<input type="button" value="Cancel" class="cancel"/>
			
		</form>
	</div>
	<div class="show">	
	<g:each in="${retroList.reverse()}" var="retro" status="i">		
		<div id="${retro.id}" class="${( i % 2 )==0 ? 'even' : 'odd' }">
			<g:if test="${retro.status=='Unsolved'}">		
				<a name="image"><img class="img" src="${resource(dir: 'images', file: 'unhappy.png')}" /></a>				
			</g:if>
			<g:else>	
					<img class="img" src="${resource(dir: 'images', file: 'happy.png')}" />
			</g:else>
			<div class="content" id="d${retro.id}">
				${retro.description}
			</div>	
<%--				<input type="button" name="retroEdit" value="Edit" style="display: none"/>--%>
				<button name="retroEdit" style="display: none; border: 0px; background-color: none;"><img style="width: 20px;height: 20px;" src="${resource(dir: 'images', file: 'edit.png')}"/><b>Edit</b></button>
				<input id="s${retro.id}" type="submit" name="retroSave"  class="retroSave" value="Save" style="display: none;"  />
				<input id="c${retro.id}" type="button" name="retroCancel"  class="retroCancel" value="Cancel" style="display: none" />
				
		</div>
	</g:each>
	</div>			
	</body>
</html>